<template>
  <a-modal :visible="formVisible" title="生成代码" @ok="submit" @cancel="close">
    <a-space size="large">
      <a-form
        ref="formRef"
        :model="form"
        :rules="rules"
        :label-col-props="{ span: 8 }"
        :wrapper-col-props="{ span: 16 }"
      >
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item field="tableName" label="表名">
              <a-input v-model="form.tableName" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="tableComment" label="备注">
              <a-input v-model="form.tableComment" placeholder="请填写" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item field="packageName" label="包名">
              <a-input
                v-model="form.packageName"
                placeholder="请填写"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="moduleName" label="模块名">
              <a-input v-model="form.moduleName" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item field="author" label="作者">
              <a-input v-model="form.author" placeholder="请填写"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="remark" label="其他说明">
              <a-input v-model="form.remark" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-space>
  </a-modal>
  <a-modal v-model:visible="viewVisible" title="代码预览" fullscreen>
    <a-tabs v-model="activeTab">
      <a-tab-pane v-for="(value, key) in viewData" :key="key" :title="key">
        <div style="white-space: pre-wrap">{{ value }}</div>
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';

  import { genView } from '@/api/upms/gen';
  import { useVisible } from '@/hooks/visible';

  const formRef = ref();

  const viewVisible = ref(false);

  const viewData = ref();

  const activeTab = ref('entity');

  const initData = () => {
    return {
      tableName: '',
      tableComment: '',
      packageName: '',
      moduleName: '',
      datasourceId: '',
      author: '',
      remark: '',
    };
  };

  const rules = {
    tableName: [
      {
        required: true,
        message: '表名不能为空',
      },
    ],
    packageName: [
      {
        required: true,
        message: '包名不能为空',
      },
    ],
    moduleName: [
      {
        required: true,
        message: '模块名不能为空',
      },
    ],
  };

  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  });

  const emit = defineEmits<{
    (e: 'update:visible', v: boolean): void;
    (e: 'refresh'): void;
  }>();

  const form = ref(props.formData);

  const { formVisible, close, open } = useVisible(props, emit);

  const submit = async () => {
    formVisible.value = true;
    const validate = await formRef.value.validate();
    if (!validate) {
      await genView(form.value).then((res) => {
        viewVisible.value = true;
        viewData.value = res;
      });

      form.value = { ...initData };
      formVisible.value = false;
    }
  };

  open(() => {
    const { packageName, moduleName, author } = props.formData;
    form.value = props.formData;
    if (!packageName) {
      form.value.packageName = 'com.ailot.cloud';
    }
    if (!moduleName) {
      form.value.moduleName = 'module';
    }
    if (!author) {
      form.value.author = 'ailot';
    }
  });
</script>
